import React, { useState } from 'react'
import { useAuth } from "../context/AuthProvider";
import { login } from "../api/user";
import { message, Button, Form, Input } from 'antd';
import { Link } from 'react-router-dom';
import backgroundImage from '../context/supermali.png';
// import backgroundImage from '../context/super.png';
// import backgroundImage from '../context/supermali.webp';

const Login = () => {
    const { setUser } = useAuth();
    const [loading, setLoading] = useState(false)
    const onFinish = (values) => {
        setLoading(true)
        login(values)
            .then(res => {
                if (res.code == 200) {
                    message.success('登录成功')
                    setUser(res.data)
                }
            })
            .finally(() => {
                setLoading(false);
            })
    }
    return <div>
        {/* 背景图片 */}
        <img
            // src="https://n.sinaimg.cn/translate/201/w1080h721/20191008/e645-ifrwayw8776074.jpg"
            src={backgroundImage}
            style={{
                width: '100%',
            }} />

        {/* <div style={{
            height: 600,
            // backgroundColor: '#003a6c',
            // opacity: 0.75,
            backgroundImage: `URL(${backgroundImage})`,
        }}></div> */}

        {/* 文字内容 */}
        <h1 style={{
            color: 'white',
            fontWeight: 'bold',
            position: 'absolute',
            top: 75,
            right: 300
        }}>知音后台管理系统</h1>


        {/* 表单 */}
        <div style={{
            width: 350,
            padding: '30px 30px 40px 30px',
            borderRadius: 25,
            backgroundColor: 'white',
            opacity: 0.90,
            position: 'absolute',
            top: 50,
            left: '50%',
            transform: "translate(10%, 25%)"
        }}>
            <Form
                name="basic"
                layout='vertical'
                style={{
                    // maxWidth: 300,
                    // margin: '50px auto'
                }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <h1 style={{ textAlign: 'center', color: '#1890ff' }}>欢迎登录</h1>

                <Form.Item
                    label="用户名"
                    name="userName"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item>
                    <Button block shape='round' loading={loading} type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
                <Link to="/register">没有账号？去注册</Link>
            </Form>
        </div>
    </div>
}

export default Login;